<template>
  <view class="home-bg">
    <!-- 标题 -->
    <view class="home-header">健康管家首页</view>

    <!-- 今日护理横幅 -->
    <view class="nursing-bar">
      <svg class="icon-inbox" viewBox="0 0 24 24">
        <path fill="#faad14"
          d="M20 6H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm0 10H4v-2.08a3 3 0 0 0 2-.63l2 2a2 2 0 0 0 2.83 0l2-2a3 3 0 0 0 2 .63V16Zm0-3.91a5 5 0 0 1-2.12-.46l-2 2a.5.5 0 0 1-.71 0l-2-2A5 5 0 0 1 4 12.09V8h16ZM7 11a1 1 0 1 0 1 1a1 1 0 0 0-1-1Zm5 0a1 1 0 1 0 1 1a1 1 0 0 0-1-1Z" />
      </svg>
      <text>向着长寿与健康，您今天完成了{{ nursingCount }}条护理，明天也要继续加油哦！</text>
    </view>

    <!-- 即将截止护理项目 -->
    <view class="section-title">即将截止护理项目</view>

    <!-- 表格区域 -->
    <view class="scroll-container">
      <!-- 表头（固定） -->
      <view class="table-header">
        <view class="table-cell">客户名</view>
        <view class="table-cell">护理项目</view>
        <view class="table-cell">剩余次数</view>
        <view class="table-cell">截止时间</view>
      </view>
      <!-- 滚动内容区域（可自动滚动） -->
      <view class="scroll-body-wrapper">
        <view
          class="scroll-body"
          :style="{ animationDuration: scrollDuration + 's' }"
        >
          <view
            class="table-row"
            v-for="(item, index) in expireList"
            :key="index"
          >
            <view class="table-cell">{{ item.client.name }}</view>
            <view class="table-cell">{{ item.nursingProject.name }}</view>
            <view class="table-cell">{{ item.clientNursingProject.quantity }}</view>
            <view class="table-cell">{{ item.clientNursingProject.endDate }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 统计卡片区块：横向排列（小屏竖排） -->
    <view class="card-row">
      <!-- 外出申请审批 -->
      <view class="card stat-card">
        <view class="card-title">七日内外出申请审批状态</view>
        <view class="card-main-row">
          <view class="circle-main blue">
            <span class="circle-num">{{ approveNum.Total }}</span>
            <span class="circle-label">总数</span>
          </view>
          <view class="stat-list">
            <view class="stat-item">
              <span class="dot pass"></span>
              <span>已通过</span>
              <span class="stat-val">{{ approveNum.approval }}</span>
            </view>
            <view class="stat-item">
              <span class="dot wait"></span>
              <span>待审核</span>
              <span class="stat-val">{{ approveNum.pending }}</span>
            </view>
            <view class="stat-item">
              <span class="dot reject"></span>
              <span>不通过</span>
              <span class="stat-val">{{ approveNum.reject }}</span>
            </view>
          </view>
        </view>
      </view>
      <!-- 归队统计 -->
      <view class="card stat-card">
        <view class="card-title card-title-green">今日外出回归统计</view>
        <view class="card-main-row">
          <view class="circle-main green">
            <span class="circle-num">{{ returnNum.should }}</span>
            <span class="circle-label">应归</span>
          </view>
          <view class="stat-list">
            <view class="stat-item">
              <span class="dot pass"></span>
              <span>实际</span>
              <span class="stat-val green">{{ returnNum.actual }}</span>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nursingCount: 0,
      userId: null,
      expireList: [],
      scrollDuration: 10,
      applyId: 5,
      approveNum: { Total: 0, approval: 0, reject: 0, pending: 0 },
      returnNum: { should: 0, actual: 0 },
    };
  },
  onLoad() {
    this.userId = uni.getStorageSync("userId") || 5;
    this.fetchNursingCount();
    this.fetchApproveNum();
    this.fetchReturnNum();
    this.fetchExpiringProjects();
  },
  onShow() {
    this.fetchExpiringProjects();
  },
  methods: {
    fetchNursingCount() {
      uni.request({
        url: `http://localhost:9000/nursingRecord/todayCaretakerCountById?userId=${this.userId}`,
        method: "GET",
        success: (res) => {
          if (res.data.status === 200) {
            this.nursingCount = res.data.data || 0;
          }
        },
      });
    },
    fetchExpiringProjects() {
      uni.request({
        url: "http://localhost:9000/clientNursingProject/judgeNursingProject",
        method: "GET",
        success: (res) => {
          const raw = res.data.data || [];
          // 数据复制一份形成滚动循环
          this.expireList = [...raw, ...raw];
          // 每项 1.5s，最小 5s 滚动时长
          this.scrollDuration = Math.max(5, this.expireList.length * 1.5);
        },
        fail: () => {
          this.expireList = [];
        },
      });
    },
    fetchApproveNum() {
      uni.request({
        url: `http://localhost:9000/leaveApply/getApproveNumById?applyId=${this.applyId}`,
        method: "GET",
        success: (res) => {
          if (res.data.status === 200 && res.data.data) {
            this.approveNum = Object.assign(
              { Total: 0, approval: 0, reject: 0, pending: 0 },
              res.data.data
            );
          } else {
            this.approveNum = { Total: 0, approval: 0, reject: 0, pending: 0 };
          }
        },
        fail: () => {
          this.approveNum = { Total: 0, approval: 0, reject: 0, pending: 0 };
        },
      });
    },
    fetchReturnNum() {
      uni.request({
        url: `http://localhost:9000/leaveApply/getReturnNumById?applyId=${this.applyId}`,
        method: "GET",
        success: (res) => {
          if (res.data.status === 200 && res.data.data) {
            this.returnNum = Object.assign(
              { should: 0, actual: 0 },
              res.data.data
            );
          } else {
            this.returnNum = { should: 0, actual: 0 };
          }
        },
        fail: () => {
          this.returnNum = { should: 0, actual: 0 };
        },
      });
    },
  },
};
</script>

<style>
.home-bg {
  min-height: 100vh;
  background: linear-gradient(120deg, #f9fafc, #fffbe6 65%);
  padding-bottom: 54px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.home-header {
  font-size: 27.2px;
  color: #faad14;
  text-align: center;
  font-weight: bold;
  margin: 32px 0 20px 0;
  letter-spacing: 2px;
}
.nursing-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(252,211,149,0.10);
  padding: 14px 16px;
  margin: 0 16px 24px 16px;
  font-size: 17px;
}
.nursing-bar .icon-inbox {
  width: 28px;
  height: 28px;
  margin-right: 6px;
}
.nursing-bar .highlight {
  color: #faad14;
  font-weight: bold;
  font-size: 23px;
  margin: 0 4px;
}
.section-title {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background-color: #faad14;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  margin: 10px 20px;
}
.scroll-container {
  border-radius: 8px;
  overflow: hidden;
  margin: 0 20px;
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
.table-header {
  display: flex;
  background-color: #faad14;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 10px 0;
  z-index: 99;
}
.table-cell {
  flex: 1;
  text-align: center;
  padding: 6px 2px;
  font-size: 15px;
  word-break: break-all;
}
.scroll-body-wrapper {
  height: 180px;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.scroll-body {
  display: flex;
  flex-direction: column;
  animation: scroll-vertical linear infinite;
}
@keyframes scroll-vertical {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
.table-row {
  display: flex;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.card-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin: 32px 16px 0 16px;
}
@media (max-width: 780px) {
  .card-row {
    flex-direction: column;
    gap: 16px;
  }
}
.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(23,162,255,0.10), 0 1.5px 0px rgba(24,181,102,0.08);
  padding: 25px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  max-width: 420px;
  margin: 0 auto;
}
.card-title {
  font-size: 21px;
  font-weight: bold;
  color: #17a2ff;
  letter-spacing: 1.5px;
  margin-bottom: 22px;
}
.card-title-green {
  color: #18b566;
}
.card-main-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.circle-main {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #e5f7ff 60%, #c3e4fa 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 5px #e6f5fc, 0 2px 12px rgba(23, 162, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  margin-right: 2px;
}
.circle-main.green {
  background: linear-gradient(135deg, #e7faf0 70%, #d4fbe6 100%);
}
.circle-num {
  font-size: 30px;
  font-weight: bold;
  color: #17a2ff;
}
.circle-main.green .circle-num {
  color: #18b566;
}
.circle-label {
  font-size: 15px;
  color: #17a2ff;
  margin-top: -5px;
  font-weight: 700;
}
.circle-main.green .circle-label {
  color: #18b566;
}
.stat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #444;
}
.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 2px;
}
.dot.pass {
  background: #18b566;
}
.dot.wait {
  background: #f6c81b;
}
.dot.reject {
  background: #ea2323;
}
.stat-val {
  font-weight: bold;
  margin-left: 2px;
  font-size: 17px;
  min-width: 22px;
  color: #17a2ff;
}
.stat-val.green {
  color: #18b566;
}
</style>
